<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="总登记号" prop="registrationNumber">
				<el-input v-model="queryParams.registrationNumber" placeholder="请输入总登记号" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="分类号" prop="productTypeId">
				<el-select v-model="queryParams.productTypeId" placeholder="请选择">
					<el-option v-for="(item,index) in productTypeList" :key="index" :label="item.productTypeName"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="" prop="categoryNumber">
				<el-input v-model="queryParams.categoryNumber" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="名称" prop="productName">
				<el-input v-model="queryParams.productName" placeholder="请输入名称" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item label="年代" prop="era">
				<el-select v-model="queryParams.era" placeholder="请选择">
					<el-option v-for="(item,index) in eraList" :key="index" :label="item.era" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="完残程度" prop="completeness">
				<el-select v-model="queryParams.completeness" placeholder="请选择">
					<el-option v-for="(item,index) in completenessList" :key="index" :label="item.completeness"
						:value="item.id">
					</el-option>
				</el-select>

			</el-form-item>
			<el-form-item label="藏品来源" prop="collectionSource">
				<el-select v-model="queryParams.collectionSource" placeholder="请选择">
					<el-option v-for="(item,index) in collectionSourceList" :key="index" :label="item.collectionSource"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="藏品级别" prop="collectionLevel">
				<el-select v-model="queryParams.collectionLevel" placeholder="请选择">
					<el-option v-for="(item,index) in collectionLevelList" :key="index" :label="item.collectionLevel"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="藏品状态" prop="productStatus">
				<el-select v-model="queryParams.productStatus" placeholder="请选择">
					<el-option v-for="(item,index) in productStatusList" :key="index" :label="item.value" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="质地" prop="material">
				<el-input v-model="queryParams.material" placeholder="请输入" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="审核状态" prop="approvalStatus">
				<el-select v-model="queryParams.approvalStatus" placeholder="请选择">
					<el-option v-for="(item,index) in approvalStatusList" :key="index" :label="item.value"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item label="全文检索" prop="warehouseId">
				<el-input v-model="queryParams.categoryNumber" placeholder="请输入关键词" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item> -->

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:product:add']">新增</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['system:product:edit']">修改</el-button>
			</el-col> -->
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['system:product:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
					v-hasPermi="['system:product:export']">导出</el-button>
				<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" @click="FaKa"
					v-hasPermi="['system:product:edit']">发卡</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<!-- <el-table-column label="藏品唯一标识符" align="center" prop="id" /> -->
			<el-table-column label="图片" align="center" prop="image">
				<el-image slot-scope="scope" :src="ApiUrl+scope.row.image"></el-image>
			</el-table-column>
			<el-table-column label="名称" align="center" prop="productName" />
			<el-table-column label="总登记号" align="center" prop="registrationNumber" />
			<el-table-column label="rfid编号" align="center" prop="rfidNumber" />
			<el-table-column label="分类号" align="center" prop="productTypeIdName" />
			<el-table-column label="分类号详情" align="center" prop="categoryNumber" />
			<el-table-column label="年代" align="center" prop="eraName" />
			<el-table-column label="方位" align="center" prop="warehouseIdNmae" />
			<el-table-column label="方位详情" align="center" prop="orientation" />
			<el-table-column label="数量" align="center" prop="quantity" />
			<el-table-column label="完残程度" align="center" prop="completenessName" />
			<el-table-column label="藏品级别" align="center" prop="collectionLevelName" />
			<el-table-column label="审核人" align="center" prop="approverName" />
			<el-table-column label="质地" align="center" prop="material" />
			<el-table-column label="登录人" align="center" prop="createByName" />
			<el-table-column label="审核状态" align="center" prop="approvalStatus">
				<template slot-scope="scope">
					<span style="color: #ff0000;" v-if="scope.row.approvalStatus=='已驳回'">已驳回</span>
					<span style="color: green;" v-if="scope.row.approvalStatus=='已通过'">通过</span>
					<span style="color: orange;" v-if="scope.row.approvalStatus=='审核中'">审核中</span>
				</template>
			</el-table-column>
			<el-table-column label="藏品状态" align="center" prop="productStatus">
				<template slot-scope="scope">
					<span style="color: #ff0000;" v-if="scope.row.productStatus=='未入库'">未入库</span>
					<span style="color: green;" v-if="scope.row.productStatus=='在库'">在库</span>
					<span style="color: orange;" v-if="scope.row.productStatus=='已出库'">已出库</span>
					<span style="color: red;" v-if="scope.row.productStatus=='非法出库'">非法出库</span>
					<span style="color: #ff0000;" v-if="scope.row.productStatus=='非法入库'">非法入库</span>
				</template>
			</el-table-column>
			<el-table-column label="发卡状态" align="center" prop="fkStatus">
				<template slot-scope="scope">
					<span style="color: #ff0000;" v-if="scope.row.fkStatus=='未发卡'">未发卡</span>
					<span style="color: green;" v-if="scope.row.fkStatus=='已发卡'">已发卡</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)"
						v-hasPermi="['system:product:edit']">查看</el-button>
					<el-button size="mini" type="text" icon="el-icon-edit" style="color: green;"
						@click="ShenHe(scope.row,'已通过')" v-hasRole="['admin']"
						v-if="scope.row.approvalStatus=='审核中'">同意</el-button>
					<el-button size="mini" type="text" icon="el-icon-edit" style="color: #ff0000;"
						@click="ShenHe(scope.row,'已驳回')" v-hasRole="['admin']"
						v-if="scope.row.approvalStatus=='审核中'">驳回</el-button>
					<el-button size="mini" type="text" icon="el-icon-edit" style="color: orange;"
						@click="ShenHe(scope.row,'审核中')" v-hasRole="['admin']"
						v-if="scope.row.approvalStatus=='已驳回'||scope.row.approvalStatus=='已通过'">撤回审核</el-button>
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['system:product:edit']" v-if="scope.row.approvalStatus!='已通过'">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
						v-hasPermi="['system:product:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 添加或修改用于存储藏品信息的对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body :close-on-click-modal="false">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="图片" prop="image" :disabled="!IsUpdate">
					<image-upload v-model="form.image" />
				</el-form-item>
				<el-form-item label="名称" prop="productName">
					<el-input v-model="form.productName" placeholder="请输入名称" :disabled="!IsUpdate" />
				</el-form-item>
				<el-form-item label="总登记号" prop="registrationNumber">
					<el-input v-model="form.registrationNumber" placeholder="请输入总登记号" :disabled="!IsUpdate" />
				</el-form-item>
				<el-form-item label="质地" prop="material">
					<el-input v-model="form.material" placeholder="请输入质地" :disabled="!IsUpdate" />
				</el-form-item>
				<div style="display: flex;flex-direction: row;width: 100%;">
					<el-form-item label="分类号" prop="productTypeId">
						<el-select v-model="form.productTypeId" placeholder="请选择分类号" :disabled="!IsUpdate">
							<el-option v-for="(item,index) in productTypeList" :key="index" :label="item.productTypeName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="" prop="categoryNumber" label-width="0">
						<el-input v-model="form.categoryNumber" placeholder="请输入" :disabled="!IsUpdate" />
					</el-form-item>
				</div>

				<div style="display: flex;flex-direction: row;width: 100%;">
					<el-form-item label="方位" prop="warehouseId">
						<el-select v-model="form.warehouseId" placeholder="请选择方位" :disabled="!IsUpdate">
							<el-option v-for="(item,index) in warehouseList" :key="index" :label="item.warehouseName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="" prop="orientation" label-width="0">
						<el-input v-model="form.orientation" placeholder="请输入" :disabled="!IsUpdate" />
					</el-form-item>
				</div>
				<el-form-item label="年代" prop="era">
					<el-select v-model="form.era" placeholder="请选择年代" :disabled="!IsUpdate">
						<el-option v-for="(item,index) in eraList" :key="index" :label="item.era" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="完残程度" prop="completeness">
					<el-select v-model="form.completeness" placeholder="请选择完残程度" :disabled="!IsUpdate">
						<el-option v-for="(item,index) in completenessList" :key="index" :label="item.completeness"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="藏品级别" prop="collectionLevel">
					<el-select v-model="form.collectionLevel" placeholder="请选择藏品级别" :disabled="!IsUpdate">
						<el-option v-for="(item,index) in collectionLevelList" :key="index" :label="item.collectionLevel"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="藏品来源" prop="collectionSource">
					<el-select v-model="form.collectionSource" placeholder="请选择藏品来源" :disabled="!IsUpdate">
						<el-option v-for="(item,index) in collectionSourceList" :key="index" :label="item.collectionSource"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 用户导入对话框 -->
		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
			<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
				:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">
					将文件拖到此处，或
					<em>点击上传</em>
				</div>
				<div class="el-upload__tip" slot="tip">
					<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
					<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
				</div>
				<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFileForm">确 定</el-button>
				<el-button @click="upload.open = false">取 消</el-button>
			</div>
		</el-dialog>
		<!--  明细新增弹窗-->
		<el-dialog title="藏品发卡" :visible.sync="OpenFaKa" width="85%" append-to-body :close-on-click-modal="false"
			@close="closeFaKa">
			<div style="width: 100%;display: flex;flex-direction: row;padding-bottom: 15px;">
				<div style="width: 300px;">
					<el-input v-model="FaKaCOM" placeholder="请输入发卡器端口(COM)" />
				</div>
				<div style="width: 50px;">

				</div>
				<el-button type="success" icon="el-icon-s-promotion" size="mini" @click="connectFaKa"
					v-if="!IsConnect">连接发卡器
				</el-button>
				<el-button type="danger" icon="el-icon-refresh" size="mini" @click="closeFaKa"
					v-if="IsConnect">断开发卡器</el-button>
			</div>

			<!-- <el-form :model="queryParamsMingXi" ref="queryFormMingXi" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-form-item label="藏品类别" prop="productTypeId">
					<el-select v-model="queryParamsMingXi.productTypeId" placeholder="请选择藏品类别">
						<el-option v-for="item in productTypeList" :key="item.id" :label="item.productTypeName"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="仓库" prop="warehouseId">
					<el-select v-model="queryParamsMingXi.warehouseId" placeholder="请选择仓库">
						<el-option v-for="item in warehouseList" :key="item.id" :label="item.warehouseName"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryMingXi">搜索
					</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQueryMingXi">重置</el-button>
				</el-form-item>
			</el-form> -->
			<el-table v-loading="loading" :data="FaKaList" >
				<!-- <el-table-column type="selection" width="55" align="center" /> -->
				<el-table-column label="图片" align="center" prop="image">
					<el-image slot-scope="scope" :src="ApiUrl+scope.row.image"></el-image>
				</el-table-column>
				<el-table-column label="名称" align="center" prop="productName" />
				<el-table-column label="总登记号" align="center" prop="registrationNumber" />
				<el-table-column label="rfid编号" align="center" prop="rfidNumber" />
				<el-table-column label="分类号" align="center" prop="productTypeIdName" />
				<el-table-column label="分类号详情" align="center" prop="categoryNumber" />
				<el-table-column label="年代" align="center" prop="eraName" />
				<el-table-column label="方位" align="center" prop="warehouseIdNmae" />
				<el-table-column label="方位详情" align="center" prop="orientation" />
				<el-table-column label="数量" align="center" prop="quantity" />
				<el-table-column label="完残程度" align="center" prop="completenessName" />
				<el-table-column label="藏品级别" align="center" prop="collectionLevelName" />
				<el-table-column label="审核人" align="center" prop="approverName" />
				<el-table-column label="质地" align="center" prop="material" />
				<el-table-column label="登录人" align="center" prop="createByName" />
				<!-- <el-table-column label="藏品状态" align="center" prop="collectionStatus" /> -->
				<el-table-column label="藏品状态" align="center" prop="productStatus">
					<template slot-scope="scope">
						<span style="color: #ff0000;" v-if="scope.row.productStatus=='未入库'">未入库</span>
						<span style="color: green;" v-if="scope.row.productStatus=='在库'">在库</span>
						<span style="color: orange;" v-if="scope.row.productStatus=='已出库'">已出库</span>
						<span style="color: #ff0000;" v-if="scope.row.productStatus=='非法出库'">非法出库</span>
						<span style="color: #ff0000;" v-if="scope.row.productStatus=='非法入库'">非法入库</span>
					</template>
				</el-table-column>
				<el-table-column label="发卡状态" align="center" prop="fkStatus">
					<template slot-scope="scope">
						<span style="color: #ff0000;" v-if="scope.row.fkStatus=='未发卡'">未发卡</span>
						<span style="color: green;" v-if="scope.row.fkStatus=='已发卡'">已发卡</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150" align="center">
					<template v-slot="scope">
						<div style="display: flex;">
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="readFaKa(scope.row,scope.$index)" v-hasPermi="['system:product:edit']"
								v-if="scope.row.fkStatus=='未发卡'">点击发卡</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="totalMingXi>0" :total="totalMingXi" :page.sync="queryParamsMingXi.pageNum"
				:limit.sync="queryParamsMingXi.pageSize" @pagination="SelectMingXi" />
			<!-- <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormMingXi">确 定</el-button>
				<el-button @click="cancelMingXi">取 消</el-button>
			</div> -->
		</el-dialog>
	</div>
</template>

<script>
	import {
		listProduct,
		getProduct,
		delProduct,
		addProduct,
		updateProduct,
		listWarehouse,
		DownTemplate,
		listType,
		connect,
		disconnect,
		read,
		listEra,
		listLevel,
		listSource,
		listCompleteness
	} from "@/api/system/product";
	import {
		getToken
	} from "@/utils/auth";
	import {
		Loading
	} from 'element-ui';
	export default {
		name: "Product",
		data() {
			return {
				// Api
				ApiUrl: process.env.VUE_APP_BASE_API,
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 用于存储藏品信息的表格数据
				productList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					id: null,
					productName: null,
					warehouseId: null,
					productNumber: null,
					specificationModel: null,
					rfidNumber: null,
					manufacturingDate: null,
					usageInstructions: null,
					shelfLife: null,
					productStatus: null,
					fkStatus: null,
					remarks: null,
					productTypeId: null,
					image: null,
					registrationNumber: null,
					categoryNumber: null,
					era: null,
					quantity: null,
					completeness: null,
					collectionLevel: null,
					orientation: null,
					approvalStatus: null,
					approver: null,
					collectionStatus: null,
					material: null,
					loginPerson: null
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {},
				// 用户导入参数
				upload: {
					// 是否显示弹出层（用户导入）
					open: false,
					// 弹出层标题（用户导入）
					title: "",
					// 是否禁用上传
					isUploading: false,
					// 是否更新已经存在的用户数据
					updateSupport: 0,
					// 设置上传的请求头部
					headers: {
						Authorization: "Bearer " + getToken()
					},
					// 上传的地址
					url: process.env.VUE_APP_BASE_API + "/system/product/importData"
				},
				// 仓库列表
				warehouseList: [],
				warehouseValue: '',
				// 是否修改
				IsUpdate: false,
				// 类别列表
				productTypeList: [],
				// 服务接口地址
				FaKaApi: "http://192.168.10.130:8089",
				OpenFaKa: false,
				FaKaList: [],
				// 明细查询参数
				queryParamsMingXi: {
					pageNum: 1,
					pageSize: 20,
					// fkStatus: "未发卡",
					approvalStatus: "已通过",
					productStatus:"未入库"
				},
				totalMingXi: 0,
				// 发卡器端口
				FaKaCOM: "COM3",
				IsConnect: false,
				approvalStatusList: [{
						id: 0,
						value: "已驳回"
					},
					{
						id: 1,
						value: "通过"
					},
					{
						id: 2,
						value: "审核中"
					}
				],
				productStatusList: [{
						id: 0,
						value: "未入库"
					},
					{
						id: 1,
						value: "在库"
					},
					{
						id: 2,
						value: "已出库"
					}, {
						id: 2,
						value: "非法出库"
					}
				],
				// 年代
				eraList: [],
				// 完残程度
				completenessList: [],
				// 藏品级别
				collectionLevelList: [],
				// 藏品来源
				collectionSourceList: [],
				fits: "cover",
			};
		},
		created() {
			this.getList();
			// 获取仓库列表
			this.listWarehouse();
			// 获取类别列表
			this.GetproductTypeList();
			// 获取方位
			this.GetEra();
			// 获取藏品级别
			this.GetLevel();
			// 获取完残程度
			this.GetCompleteness();
			// 获取藏品来源
			this.GetSource();
		},
		methods: {
			closeFaKaTow(){

				disconnect(this.FaKaApi).then(response => {
					console.log("断开发卡器结果", response)
					if (response.msg == "true") {
						this.IsConnect = false;
					} else {
					}
				});
			},
			// 审核事件
			ShenHe(row, ShenHeValue) {
				this.$confirm('是否确认' + ShenHeValue + '此藏品？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const id = row.id || this.ids
					row.approvalStatus = ShenHeValue;
					row.isApprover = 1;
					var form = row;
					updateProduct(form).then(response => {
						this.$modal.msgSuccess("审核成功");
						this.getList();
					});
				}).catch(() => {

				});
			},
			// 获取方位
			GetEra() {
				console.log("接口地址", process.env.VUE_APP_BASE_API.target)
				listEra().then(response => {
					console.log("年代列表", response)
					this.eraList = response.rows;
				});
			},
			// 获取藏品级别
			GetLevel() {
				listLevel().then(response => {
					console.log("藏品级别列表", response)
					this.collectionLevelList = response.rows;
				});
			},
			// 获取完残程度
			GetCompleteness() {
				listCompleteness().then(response => {
					console.log("完残程度列表", response)
					this.completenessList = response.rows;
				});
			},
			// 获取藏品来源
			GetSource() {
				listSource().then(response => {
					console.log("藏品来源列表", response)
					this.collectionSourceList = response.rows;
				});
			},
			// 发卡事件
			FaKa() {
				// 弹窗显示
				this.OpenFaKa = true;
				this.SelectMingXi();
				// // 连接发卡器
				// this.connectFaKa();
			},
			// 连接发卡器
			connectFaKa() {
				if (this.FaKaCOM == null) {
					this.$message({
						message: '请填写发卡器端口号',
						type: 'warning'
					});
					return;
				}
				let loadingInstance = Loading.service();
				connect(this.FaKaCOM, this.FaKaApi).then(response => {
					loadingInstance.close();
					console.log("连接发卡器结果", response)
					if (response.msg == "连接成功") {
						this.$message({
							message: '连接成功',
							type: 'success'
						});
						this.IsConnect = true;
					} else {
						this.$message.error('连接失败,请重新拔插发卡器');
					}
				});
			},
			// 发卡器单次读取
			readFaKa(row, index) {
				if (!this.IsConnect) {
					this.$message({
						message: '请连接发卡器',
						type: 'warning'
					});
					return;
				}
				console.log("发卡的索引值", index)
				let loadingInstance = Loading.service();
				read(this.FaKaApi, row).then(response => {
					loadingInstance.close();
					console.log("发卡器读取结果", response)
					if (response.msg != "读取失败") {
						// this.FaKaList[index].fkStatus = "已发卡";
						// this.FaKaList[index].rfidNumber = response.msg;
						this.$message({
							message: '发卡成功',
							type: 'success'
						});
						// 刷新列表
						// this.SelectMingXi();
					} else {
						this.$message({
							message: '发卡失败，请重新读取',
							type: 'error'
						});
					}
				});
			},
			// 断开发卡器
			closeFaKa() {
				if(this.IsConnect){
					let loadingInstance = Loading.service();
					disconnect(this.FaKaApi).then(response => {
						loadingInstance.close();
						console.log("断开发卡器结果", response)
						if (response.msg == "true") {
							this.$message({
								message: '断开成功',
								type: 'success'
							});
							this.IsConnect = false;
						} else {
							this.$message.error('断开失败');
						}
					});
				}

			},
			/** 查询用于发卡的藏品的列表 */
			SelectMingXi() {
				this.loading = true;
				listProduct(this.queryParamsMingXi).then(response => {
					console.log("发卡藏品列表", response)
					this.FaKaList = response.rows;
					this.totalMingXi = response.total;
					this.loading = false;
				});
			},
			// 获取仓库列表
			listWarehouse() {
				listWarehouse().then(response => {
					console.log("仓库列表", response)
					this.warehouseList = response.rows;
				});
			},
			// 获取类别
			GetproductTypeList() {
				listType().then(response => {
					console.log("类别列表", response)
					this.productTypeList = response.rows;
				});
			},
			/** 查询用于存储藏品信息的列表 */
			getList() {
				var that = this;
				that.loading = true;
				listProduct(that.queryParams).then(response => {
					console.log("藏品列表", response)
					that.productList = response.rows;
					// that.productList.forEach(function(res){
					// 	res.image = process.env.VUE_APP_BASE_API+res.image
					// })
					console.log("藏品列表", that.productList)
					that.total = response.total;
					that.loading = false;
					// 断开发卡器，防止没有断开
					this.closeFaKaTow();
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					productName: null,
					warehouseId: null,
					productNumber: null,
					specificationModel: null,
					rfidNumber: null,
					manufacturingDate: null,
					usageInstructions: null,
					shelfLife: null,
					delFlag: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					productStatus: null,
					fkStatus: null
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.IsUpdate = true;
				this.title = "添加藏品信息";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				this.IsUpdate = true;
				getProduct(id).then(response => {
					console.log("修改信息", response)
					this.form = response.data;
					this.open = true;
					this.title = "修改藏品信息";
				});
			},
			// 查看
			handleLook(row) {
				this.reset();
				const id = row.id || this.ids
				this.IsUpdate = false;
				getProduct(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "查看藏品信息";
				});
			},
			// 审核
			handleShenHe(row) {
				this.reset();
				const id = row.id || this.ids
				this.IsUpdate = false;
				getProduct(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "审核藏品信息";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							this.form.isApprover = 0;
							updateProduct(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addProduct(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除用于存储藏品信息的编号为"' + ids + '"的数据项？').then(function() {
					return delProduct(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/product/export', {
					...this.queryParams
				}, `product_${new Date().getTime()}.xlsx`)
			},
			/** 导入按钮操作 */
			handleImport() {
				this.upload.title = "藏品信息导入";
				this.upload.open = true;
			},
			/** 下载模板操作 */
			importTemplate() {
				this.download('/system/product/importTemplate', {}, '藏品信息模板.xLsx')
				// DownTemplate().then(response => {
				// 	console.log("下载模板", response)
				// 	this.download(response.msg);
				// });
			},
			// 文件上传中处理
			handleFileUploadProgress(event, file, fileList) {
				this.upload.isUploading = true;
			},
			// 文件上传成功处理
			handleFileSuccess(response, file, fileList) {
				this.upload.open = false;
				this.upload.isUploading = false;
				this.$refs.upload.clearFiles();
				this.$alert(response.msg, "导入结果", {
					dangerouslyUseHTMLString: true
				});
				this.getList();
			},
			// 提交上传文件
			submitFileForm() {
				// 展示加载框
				var options = {
					target: "document.body",
					text: "导入中",
					background: "#000000"
				};
				let loadingInstance = Loading.service(options);
				this.$refs.upload.submit();
				loadingInstance.close();
			},
			binrowkey(row){
				return row.id;
			},
		}
	};
</script>
